<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>添加/修改页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/index.css">
</head>

<body>
    <div id="app" v-cloak>
        <div class="add">
            <div class="header">
                <span>{{(action == 'Add'?'添加':(type=='0'?'修改':'查询'))}}门店信息</span>
            </div>
            <div class="main" style="padding: 0 15px;">
                <!-- 配置属性, 目前仅支持 单主表 多子表 结构 -->
                <div id="form" :data-options="JSON.stringify({'tableName':'store_info','formName':'dataForm' ,'primaryKey':'Store_SerialNumber'})"></div>
                <div class="table_titel">
                    <div class="titel">门店信息</div>
                </div>
                <el-form :model="dataForm" ref="form" :inline-message="true" style="width: 100%">
                    <el-descriptions :column="2" size="large" border>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">门店名称</div>
                            </template>
                            <el-form-item prop="Store_Name" :rules="[{ required: true, message: '请输入门店名称', trigger: 'blur' }]">
                                <el-input :disabled="type=='1'" v-model.trim="dataForm.Store_Name" placeholder="请输入门店名称" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">开店日期</div>
                            </template>
                            <el-form-item prop="Opened_Date" :rules="[{ required: true, message: '请选择开店日期', trigger: 'change' }]">
                                <el-date-picker :disabled="type=='1'" v-model="dataForm.Opened_Date" type="date" placeholder="选择日期" style="width: 100%;"
                                    value-format="yyyy-MM-dd" />
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">门店类别</div>
                            </template>
                            <el-form-item prop="Store_Type" :rules="[{ required: true, message: '请选择门店类别', trigger: 'change' }]">
                                <el-select :disabled="type=='1'" v-model.trim="dataForm.Store_Type" placeholder="请选择门店类别" filterable style="width: 100%" clearable>
                                    <el-option label="实体店" value="0"></el-option>
                                    <el-option label="网店" value="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">门店子类别</div>
                            </template>
                            <el-form-item prop="Store_SubType">
                                <el-select :disabled="type=='1' || dataForm.Store_Type !== '1'" v-model.trim="dataForm.Store_SubType" placeholder="请选择门店子类别" filterable style="width: 100%" clearable>
                                    <el-option label="天猫店" value="0"></el-option>
                                    <el-option label="抖音店" value="1"></el-option>
                                    <el-option label="美团店" value="2"></el-option>
                                    <el-option label="大众点评" value="3"></el-option>
                                    <el-option label="京东店" value="4"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item :span="2">
                            <template slot="label">
                                <div class="cell-item required">地址（省-市-区）</div>
                            </template>
                            <el-form-item prop="CountyNumber" :rules="[{ required: true, message: '请选择地址', trigger: 'change' }]">
                                <el-cascader :disabled="type=='1'" @change="changeCity" v-model.trim="dataForm.CountyNumber" filterable
                                    :props="{label:'name',value:'code',emitPath:false}" :options="city" clearable placeholder="请选择地址"
                                    style="width: 100%;"></el-cascader>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">省行政区编号</div>
                            </template>
                            <el-form-item prop="ProvinceNumber">
                                <el-input :disabled="true" v-model.trim="dataForm.ProvinceNumber" placeholder="省行政区编号（自动填充）" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">市行政区编码</div>
                            </template>
                            <el-form-item prop="CityNumber">
                                <el-input :disabled="true" v-model.trim="dataForm.CityNumber" placeholder="市行政区编码（自动填充）" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">区行政区编码</div>
                            </template>
                            <el-form-item>
                                <el-input :disabled="true" v-model.trim="dataForm.CountyNumber" placeholder="区行政区编码（自动填充）" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">详细地址</div>
                            </template>
                            <el-form-item prop="Detailed_Address" :rules="[{ required: true, message: '请输入详细地址', trigger: 'blur' }]">
                                <el-input :disabled="type=='1' || !dataForm.CountyNumber" v-model.trim="dataForm.Detailed_Address"
                                    placeholder="请输入详细地址" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-form>
            </div>
            <div class="footer">
                <el-button size="medium" @click="handleBack">返回</el-button>
                <el-button v-if="type == '0'" size="medium" type="primary" plain @click="handleSubmit" :loading="loading">提交</el-button>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../utils/components.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="../../../utils/http.js"></script>
    <script type="text/javascript" src="js/add.js"></script>
</body>

</html>
